<template>
  <div class="my-store-add-goods">
    <div class="item">
      <product-item :cover="productDetail.goodsImg ? staticHost + productDetail.goodsImg : ''">
        <div class="product-info" slot="product-item">
          <div class="name">{{productDetail.goodsName}}</div>
          <div class="p-info">
            <p class="size">{{productDetail.size}}</p>
            <p class="price">
              <span>￥{{productDetail.presentPrice}}</span>
              <!-- <span class="delete">￥{{productDetail.size}}</span> -->
            </p>
            <!-- <p class="status">
              <span>库存：999组</span>
              <span class="sign">已售罄</span>
            </p>-->
          </div>

          <div class="num">
            <span>进货数量：</span>
            <stepper v-model="number" button-size="22px" @change="onStepperChange" />
            <span></span>
          </div>
        </div>
      </product-item>
    </div>

    <div class="money">
      <p>
        <span>可用余额：</span>
        <span>￥{{agentInfo.balance}}</span>
      </p>

      <p>
        <span>可用货款：</span>
        <span>￥{{agentInfo.goods_money}}</span>
      </p>

      <p>
        <span>订单总额：</span>
        <span class="total">￥{{totalPrice}}</span>
      </p>

      <!-- <p>
        <span>支付方式：</span>
        <span>货款</span>
      </p>-->
    </div>

    <div class="submit">
      <van-button type="info" size="large" @click="goToSettlement">进货结算</van-button>
    </div>
  </div>
</template>

<script>
import { Stepper, Button } from "vant";
import productItem from "../components/product_item.vue";
import { staticHost } from "../service/HOST.js";
import { mapState } from "vuex";

export default {
  components: {
    productItem,
    Stepper,
    vanButton: Button
  },
  data() {
    return {
      staticHost,
      productDetail: this.$route.query,
      totalPrice: 0,
      cartList: [],
      number: 1,
      agentInfo: {}
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  async mounted() {
    // 计算总价
    this.totalPrice = Number(
      this.productDetail.presentPrice * this.number
    ).toFixed(2);

    //获取货款和余额
    await this.getAgentInfo();
  },
  methods: {
    // 跳转到结算
    goToSettlement() {
      this.productDetail.number = this.number;
      this.cartList.push(this.productDetail);
      localStorage.setItem("addStore", JSON.stringify(this.cartList));

      this.$router.replace({
        path: "/settlement",
        query: {
          shopType: "storeAdd"
        }
      });
    },
    onStepperChange(value) {
      // 计算总价
      this.totalPrice = Number(this.productDetail.presentPrice * value).toFixed(
        2
      );
    },
    // 获取用户信息
    getAgentInfo() {
      return this.$http
        .post(this.$urls.DLXQ, {
          id: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.agentInfo = data;
          }
        });
    }
  }
};
</script>

<style scoped>
.item {
  padding: 10px 10px 0 10px;
  background-color: #fff;
}

.product-info{
  padding-left: 10px
}

.p-info .size {
  font-size: 0.9rem;
}

.price span:first-child {
  color: var(--money-up);
}

.status .sign {
  background-color: #bebebe;
  color: #fff;
  font-size: 0.9rem;
  padding: 0 5px;
  border-radius: 3px;
}

.num {
  display: flex;
  /* justify-content: flex-end; */
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.money p {
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  background-color: #fff;
}

.delete {
  font-size: 0.9rem;
  text-decoration: line-through;
  /* padding-left: 10px; */
}

.total {
  color: var(--money-up);
}
</style>